import React from 'react';
import { FiEdit3, FiGlobe, FiLayout, FiCloud } from 'react-icons/fi';

const Features = () => {
  const features = [
    {
      icon: <FiEdit3 className="w-6 h-6" />,
      title: "智能编辑",
      description: "实时预览，AI协助，让 LaTeX 编辑更轻松"
    },
    {
      icon: <FiGlobe className="w-6 h-6" />,
      title: "中英文支持",
      description: "完美支持中英文混排，无缝切换不同语言"
    },
    {
      icon: <FiLayout className="w-6 h-6" />,
      title: "模板系统",
      description: "丰富的学术模板库，快速开始写作"
    },
    {
      icon: <FiCloud className="w-6 h-6" />,
      title: "云端协作",
      description: "实时保存，分享，随时随地访问"
    }
  ];

  return (
    <div className="py-20 bg-gray-50">
      <div className="container mx-auto px-6">
        <h2 className="text-3xl font-bold text-center mb-16">为何选择 FlyLaTeX</h2>
        <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
          {features.map((feature, index) => (
            <div key={index} className="bg-white p-6 rounded-xl shadow-lg hover:shadow-xl transition">
              <div className="text-blue-600 mb-4">{feature.icon}</div>
              <h3 className="text-xl font-semibold mb-2">{feature.title}</h3>
              <p className="text-gray-600">{feature.description}</p>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

export default Features;